<template>
	<div class="login-container flex">
		<div class="login-left">
			<div class="logo">
				<img :src="logoMini" />
				{{ themeConfig.globalViceTitle }}
			</div>
			<div class="left_bg">
				<img :src="loginBoxBg" />
				欢迎使用本系统
			</div>
		</div>
		<div class="login-right flex">
			<div class="right_content">
				登录
				<Account />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/images/logo.png';
import { getAssetsFile } from '/@/utils/utils';
import loginBoxBg from '/@/assets/images/login-box-bg.svg';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	tabsActiveName: 'account',
	isScan: false,
});

function openUrl() {
	window.open('https://beian.miit.gov.cn/');
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	.login-left {
		width: 60vw;
		height: 100vh;
		background-color: #303749;
		display: flex;

		position: relative;

		.left_bg {
			display: flex;
			flex-direction: column;
			width: 100%;
			text-align: center;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 24px;

			img {
				width: 50%;
			}
		}

		.logo {
			position: absolute;
			top: 30px;
			left: 30px;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 22px;
			font-weight: 800;

			img {
				width: 50px;
				height: 50px;
				margin-right: 10px;
			}
		}
	}

	.login-right {
		width: 40vw;
		height: 100vh;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;

		.right_content {
			display: flex;
			flex-direction: column;
			font-size: 22px;
			font-weight: 800;
		}
	}
}

.bottom_text {
	position: fixed;
	bottom: 10px;
	left: 10px;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}
</style>
